<template>
	<view class="main">
		<view class="pl30 pr30">
			<view>
				<u-input
					placeholder="试试搜“小程序”"
					v-model="searchVal"
					color="#787C81"
					:customStyle="{
						width: '500rpx',
						height: '72rpx',
						background: '#FFFFFF',
						'border-radius': '40rpx',
						'font-size': '28rpx',
						padding: '0 30rpx',
					}"
					:placeholderStyle="{
						color: '#787C81',
					}"
				>
					<template #suffix>
						<image class="search-img" src="@/static/images/search.jpg" mode="aspectFit" />
					</template>
				</u-input>
			</view>
			<view class="mt20">
				<u-swiper
					height="300rpx"
					keyName="url"
					:list="banner"
					indicatorInactiveColor="#f6f6f6"
					indicatorActiveColor="#ffffff"
					indicator
					indicatorMode="dot"
					circular
					:current="0"
				></u-swiper>
			</view>
			<view class="mt20">
				<u-notice-bar
					text="亲爱的用户您好！欢迎光临！我们提供各种娱乐活动供您畅游"
					bgColor="transparent"
					color="#71757A"
				></u-notice-bar>
			</view>
			<view class="mt34 pd30 menu-box">
				<u-grid :border="false" col="4" @click="handleGrid">
					<u-grid-item v-for="(item, index) in menuList" :key="index">
						<image style="width: 100rpx; height: 100rpx" :src="item.url" />
						<view class="mt16 menu-name">{{ item.name }}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="mt30" @click="openCustomerServiceChat">
				<image style="width: 100%; height: 143rpx" src="@/static/images/banner-share.png" />
			</view>
		</view>
		<view class="list-box">
			<view class="list-title mb24">专属定制</view>
			<view class="flex-between list-item" @click="navigate('/pages/serverDetail/index')">
				<image style="width: 184rpx; height: 184rpx" src="@/static/images/goods.jpg" />
				<view class="list-right">
					<view class="item-name">软件开发定制小程序分销商城预约系统物联网餐饮源文件定制</view>
					<view class="item-num">1000+浏览</view>
					<view class="flex-between">
						<view class="item-price">¥100.00</view>
						<u-button
							text="立即咨询"
							:customStyle="{
								boxSizing: 'content-box',
								width: '120rpx',
								height: '45rpx',
								background: '#0081FF',
								'border-radius': '22rpx',
								'font-size': '24rpx',
								color: '#FFFFFF',
							}"
						></u-button>
					</view>
				</view>
			</view>
			<view class="flex-between list-item">
				<image style="width: 184rpx; height: 184rpx" src="@/static/images/goods.jpg" />
				<view class="list-right">
					<view class="item-name">软件开发定制小程序分销商城预约系统物联网餐饮源文件定制</view>
					<view class="item-num">1000+浏览</view>
					<view class="flex-between">
						<view class="item-price">¥100.00</view>
						<u-button
							text="立即咨询"
							:customStyle="{
								boxSizing: 'content-box',
								width: '120rpx',
								height: '45rpx',
								background: '#0081FF',
								'border-radius': '22rpx',
								'font-size': '24rpx',
								color: '#FFFFFF',
							}"
						></u-button>
					</view>
				</view>
			</view>
			<view class="flex-between list-item">
				<image style="width: 184rpx; height: 184rpx" src="@/static/images/goods.jpg" />
				<view class="list-right">
					<view class="item-name">软件开发定制小程序分销商城预约系统物联网餐饮源文件定制</view>
					<view class="item-num">1000+浏览</view>
					<view class="flex-between">
						<view class="item-price">¥100.00</view>
						<u-button
							text="立即咨询"
							:customStyle="{
								boxSizing: 'content-box',
								width: '120rpx',
								height: '45rpx',
								background: '#0081FF',
								'border-radius': '22rpx',
								'font-size': '24rpx',
								color: '#FFFFFF',
							}"
						></u-button>
					</view>
				</view>
			</view>
		</view>
		<Slider :isScroll="isScroll"></Slider>
	</view>
</template>

<script setup lang="ts">
import { openCustomerServiceChat } from '@/utils/utils';
import Slider from '@/components/slider.vue';
import { navigate } from '@/utils/utils';

const searchVal = ref('');
const banner = [
	{
		url: '../../../../static/images/banner1.jpg',
	},
	{
		url: '../../../../static/images/banner2.jpg',
	},
	{
		url: '../../../../static/images/banner3.jpg',
	},
];
const menuList = [
	{
		url: '../../static/images/icon-soft.jpg',
		name: '软件开发',
	},
	{
		url: '../../static/images/icon-app.jpg',
		name: 'APP开发',
	},
	{
		url: '../../static/images/icon-inter.jpg',
		name: '物联网开发',
	},
	{
		url: '../../static/images/icon-take.jpg',
		name: '定制开发',
	},
];
const handleGrid = () => {};

const isScroll = ref(false);
let timer: NodeJS.Timeout | null = null;
onPageScroll(() => {
	if (!isScroll.value) isScroll.value = true;
	clearTimeout(timer as NodeJS.Timeout);
	timer = setTimeout(() => {
		isScroll.value = false;
		clearTimeout(timer as NodeJS.Timeout);
	}, 500);
});
onShareAppMessage(res => {
	if (res.from === 'button') {
		// 来自页面内分享按钮
		console.log(res.target);
	}
	return {
		title: 'spring-boot-plus-app',
		path: '/pages/index/index',
	};
});
</script>
<style lang="scss" scoped>
.main {
	height: 100%;
	padding: 318rpx 0 0;
	background: url('http://47.109.79.197/:8888/api/file/202401/20240123155113507330035216389.jpg') no-repeat top/contain
		#f5fafe;
	// background: linear-gradient(180deg, #13144c 0%, #f5f5f5 30%);

	.search-img {
		width: 36rpx;
		height: 36rpx;
	}

	:deep(.u-notice-bar) {
		padding: 0;
	}

	.menu-box {
		background: #ffffff;
		border-radius: 20rpx;
	}

	.menu-name {
		font-size: 24rpx;
		color: #333333;
	}

	.list-box {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 30rpx;

		.list-right {
			width: 100%;
			height: 100%;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 36rpx;
		}

		.list-title {
			font-size: 36rpx;
			color: #333333;
		}

		.list-item:not(:last-child) {
			margin-bottom: 30rpx;
		}

		.list-item {
			width: 690rpx;
			height: 244rpx;
			background: #f5fafe;
			border-radius: 20rpx;
			padding: 30rpx 18rpx;

			.item-name {
				width: 100%;
				font-size: 28rpx;
				color: #333333;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.item-num {
				font-size: 24rpx;
				color: #e56f01;
			}

			.item-price {
				font-size: 24rpx;
				color: #ff0606;
			}
		}
	}
}
</style>
